<template>
    <div class="welfare-wrapper" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <div class="welfare-center">
            <figure v-show="leftData.length > 0" v-for="(data,index) in leftData" :key='index' @click="selectDetails(data.createdAt)">
                <v-img :imgUrl="data.url"></v-img>
            </figure>
        </div>
        <div class="welfare-center">
            <figure v-show="rightData.length > 0" v-for="(data,index) in rightData" :key='index' @click="selectDetails(data.createdAt)">
                <v-img :imgUrl="data.url"></v-img>
            </figure>
        </div>
    </div>
</template>
<script>
import vImg from './lazyloadImg/lazyimg.vue';
export default {
    data() {
        return {
            leftData: [],
            rightData: [],
            busy: false,
            page: 0,
            time: ''
        };
    },
    components: {
        vImg,
    },
    created() {
    },
    methods: {
        loadTop() {
            this.$http.get(`https://gank.io/api/data/福利/10/${this.page}`).then((response) => {
                let left = response.data.results.filter((data, i) => {
                    return (i + 1) % 2 === 1;
                });
                let right = response.data.results.filter((data, i) => {
                    return (i + 1) % 2 !== 1;
                });
                this.leftData = this.leftData.concat(left);
                this.rightData = this.rightData.concat(right);
                this.busy = false;
            });
        },
        loadMore() {
            this.page++;
            this.busy = true;
            this.loadTop();
        },

        selectDetails(time) {
            console.log(time);
        }
    }
};
</script>
<style lang="css" scoped>
.welfare-wrapper {
    display: flex;
}

.welfare-wrapper .welfare-center {
    width: 50%;
    column-width: 200px;
    column-gap: 15px;
    max-width: 1100px;
}

.welfare-wrapper .welfare-center figure {
    width: 95%;
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    display: inline-block;
    z-index: 11;
}

.welfare-wrapper .welfare-center figure img {
    width: 100%;
    height: auto;
}

.welfare-wrapper .welfare-center figcaption {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
}
</style>